.ykl-layout {
  box-sizing: border-box;
  min-height:100%;
  padding-bottom: 51px;
  background-color: #f5f5f5;
}
.top-block{
  position:relative;
  height: 250px;
  background-color: #76a6f0;
  color: #fff;
}
.top-block .user-msg-box,
.top-block .user-action-box{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.top-block .user-msg-box{
  top:55px;
  text-align:center;
}
.top-block .user-msg-box img{
  width: 100px;
  height:100px;
  border-radius:50%;
  margin-bottom: 10px;
}
.top-block .user-msg-box p{
  font-size:20px;
  white-space: nowrap;
  text-align: center;
}
.top-block .user-action-box{
   top:210px;
   background:#fff;
   height:280px;
   width:280px;
   border-radius: 5px;
   box-shadow:0 0 5px #ccc; 
   display: flex;
   flex-wrap:wrap;
}
.top-block .user-action-box .user-action-item{
  width:50%;
  height:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.top-block .user-action-box .user-action-item span{
  width:60px;
  height:60px;
  border-radius:50%;
  font-size:30px;
  color:#fff;
  line-height: 60px;
  text-align:center;
  margin-bottom: 15px;
}
.top-block .user-action-box .user-action-item .icon-bianji{
  background-color:#FFBC40;
}
.top-block .user-action-box .user-action-item .icon-shezhi{
  background-color:#FF575B;
}
.top-block .user-action-box .user-action-item p{
  font-size:18px;
  color:#999;
  text-align:center;
}